<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
            size="small"
            style="float:right"
            type="primary"
            @click="handleSearchList()">
          查询搜索
        </el-button>
        <el-button
            size="small"
            style="float:right;margin-right: 15px"
            @click="handleResetSearch()">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" label-suffix="：" label-width="auto" size="small">
          <el-form-item label="位置" prop="placeType">
            <el-select v-model="listQuery.placeTypeArr" clearable filterable multiple style="width:100%">
              <el-option label="搜索框" value="1"></el-option>
              <el-option label="table列表" value="2"></el-option>
              <el-option label="新增/编辑" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板" prop="templateId">
            <span v-if="listQuery.templateConfig.templateName"
                  style="color: grey">已选择: {{ listQuery.templateConfig.templateName }}</span>
            <el-button size="mini" style="margin-left: 10px" type="primary"
                       @click="showComponent(true,'templateId','templateConfig','id','templateName')">选择模板
            </el-button>
          </el-form-item>

        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" size="mini" style="margin-left: 20px" type="warning" @click="handleAdd()">
        添加
      </el-button>
    </el-card>

    <div class="table-container">
      <el-table v-loading="listLoading"
                :data="list"
                border style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form class="demo-table-expand" inline label-position="left"
                     style="background-color: #eeeeee4f">
              <el-form-item label="允许的字段类型" prop="allowFieldType">
                <span
                    v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('Time') !== -1">Time</span>
                <span v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('String') !== -1">String</span>
                <span v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('Double') !== -1">Double</span>
                <span
                    v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('Timestamp') !== -1">Timestamp</span>
                <span
                    v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('BigDecimal') !== -1">BigDecimal</span>
                <span
                    v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('Date') !== -1">Date</span>
                <span v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('Integer') !== -1">Integer</span>
                <span v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('byte[]') !== -1">byte[]</span>
                <span v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('Float') !== -1">Float</span>
                <span
                    v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('Long') !== -1">Long</span>
                <span v-if="scope.row.allowFieldType && scope.row.allowFieldType.split(',').indexOf('Boolean') !== -1">Boolean</span>
              </el-form-item>
              <el-form-item label="禁止字段类型" prop="banFieldType">
                <span
                    v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('Time') !== -1">Time</span>
                <span
                    v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('String') !== -1">String</span>
                <span
                    v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('Double') !== -1">Double</span>
                <span v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('Timestamp') !== -1">Timestamp</span>
                <span v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('BigDecimal') !== -1">BigDecimal</span>
                <span
                    v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('Date') !== -1">Date</span>
                <span v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('Integer') !== -1">Integer</span>
                <span
                    v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('byte[]') !== -1">byte[]</span>
                <span
                    v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('Float') !== -1">Float</span>
                <span
                    v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('Long') !== -1">Long</span>
                <span v-if="scope.row.banFieldType && scope.row.banFieldType.split(',').indexOf('Boolean') !== -1">Boolean</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column align="center" label="模板" prop="templateId">
          <template slot-scope="scope">
            {{ (scope.row.templateConfig || {}).templateName }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="位置" prop="placeType">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.placeType && scope.row.placeType.split(',').indexOf('1') !== -1" type="primary">
              搜索框
            </el-tag>
            <el-tag v-if="scope.row.placeType && scope.row.placeType.split(',').indexOf('2') !== -1" type="success">
              table列表
            </el-tag>
            <el-tag v-if="scope.row.placeType && scope.row.placeType.split(',').indexOf('3') !== -1" type="danger">
              新增/编辑
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="控件取值名称" prop="componentName" show-overflow-tooltip/>
        <el-table-column align="center" label="控件展示名称" prop="componentLabel" show-overflow-tooltip/>
        <el-table-column align="center" label="特殊类型" prop="fieldType">
          <template slot="header">
            <span style="margin-right: 5px">特殊类型</span>
            <el-tooltip content="特殊类型在字段映射配置界面需要做特殊处理" effect="light" placement="top">
              <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.fieldType == 'association'" type="success">一对一</el-tag>
            <el-tag v-if="scope.row.fieldType == 'collection'" type="danger">一对多</el-tag>
            <el-tag v-if="scope.row.fieldType == 'switch'" type="warning">开关</el-tag>
            <el-tag v-if="scope.row.fieldType == 'option'" type="primary">选项</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="重构后台" prop="rebuildFlag">
          <template slot="header">
            <span style="margin-right: 5px">重构后台</span>
            <el-tooltip content="本配置是否涉及后台变动。如Date日期类型，后台实体类需要重新生成，设置字段类型为Date" effect="light" placement="top">
              <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.rebuildFlag == '0'" type="primary">否</el-tag>
            <el-tag v-if="scope.row.rebuildFlag == '1'" type="success">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
          :current-page.sync="listQuery.current"
          :page-size="listQuery.pageSize"
          :page-sizes="[5,10,15]"
          :total="total"
          background
          layout="total, sizes,prev, pager, next,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="editDialogVisible"
               title="编辑模板可配置的字段映射类型管理" width="60%"
               @close="handleDialogClose('editDialogRef')">
      <el-form ref="editDialogRef" :model="templateFieldConfig"
               :rules="formRule" label-suffix="："
               label-width="auto" size="small">
        <el-form-item label="模板" prop="templateId">
          <span v-if="templateFieldConfig.templateConfig && templateFieldConfig.templateConfig.templateName"
                style="color: grey">已选择: {{ templateFieldConfig.templateConfig.templateName }}</span>
          <el-button size="mini" style="margin-left: 10px" type="primary"
                     @click="showComponent(false,'templateId','templateConfig','id','templateName')">选择模板
          </el-button>
        </el-form-item>
        <el-form-item label="位置" prop="placeType">
          <el-select v-model="templateFieldConfig.placeTypeArr" :clearable="false" filterable multiple
                     style="width:100%">
            <el-option label="搜索框" value="1"></el-option>
            <el-option label="table列表" value="2"></el-option>
            <el-option label="新增/编辑" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="控件取值名称" prop="componentName">
          <el-input v-model="templateFieldConfig.componentName" :clearable="false" maxlength="255" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="控件展示名称" prop="componentLabel">
          <el-input v-model="templateFieldConfig.componentLabel" :clearable="false" maxlength="255" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="特殊类型" prop="fieldType">
          <el-select v-model="templateFieldConfig.fieldType" clearable filterable style="width:100%">
            <el-option label="一对一" value="association"></el-option>
            <el-option label="一对多" value="collection"></el-option>
            <el-option label="开关" value="switch"></el-option>
            <el-option label="选项" value="option"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重构后台" prop="rebuildFlag">
          <template #label>
            <span>
              重构后台：
              <el-tooltip effect="light" placement="bottom">
                <template #content>
                  本配置是否涉及后台变动。如Date日期类型，后台实体类需要重新生成，设置字段类型为Date
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </span>
          </template>
          <template slot-scope="scope">
            <el-radio-group v-model="templateFieldConfig.rebuildFlag">
              <el-radio label="0">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="允许的字段类型" prop="allowFieldType">
          <el-select v-model="templateFieldConfig.allowFieldTypeArr" clearable filterable multiple style="width:100%">
            <el-option label="Integer" value="Integer"></el-option>
            <el-option label="byte[]" value="byte[]"></el-option>
            <el-option label="Float" value="Float"></el-option>
            <el-option label="Long" value="Long"></el-option>
            <el-option label="Time" value="Time"></el-option>
            <el-option label="String" value="String"></el-option>
            <el-option label="Boolean" value="Boolean"></el-option>
            <el-option label="Double" value="Double"></el-option>
            <el-option label="Timestamp" value="Timestamp"></el-option>
            <el-option label="BigDecimal" value="BigDecimal"></el-option>
            <el-option label="Date" value="Date"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="禁止字段类型" prop="banFieldType">
          <el-select v-model="templateFieldConfig.banFieldTypeArr" clearable filterable multiple style="width:100%">
            <el-option label="Integer" value="Integer"></el-option>
            <el-option label="byte[]" value="byte[]"></el-option>
            <el-option label="Float" value="Float"></el-option>
            <el-option label="Long" value="Long"></el-option>
            <el-option label="Time" value="Time"></el-option>
            <el-option label="String" value="String"></el-option>
            <el-option label="Boolean" value="Boolean"></el-option>
            <el-option label="Double" value="Double"></el-option>
            <el-option label="Timestamp" value="Timestamp"></el-option>
            <el-option label="BigDecimal" value="BigDecimal"></el-option>
            <el-option label="Date" value="Date"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleEditDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="addDialogVisible"
               title="新增模板可配置的字段映射类型管理" width="60%"
               @close="handleDialogClose('addDialogRef')">
      <el-form ref="addDialogRef" :model="templateFieldConfig"
               :rules="formRule" label-suffix="："
               label-width="auto" size="small">
        <el-form-item label="模板" prop="templateId">
          <span v-if="templateFieldConfig.templateConfig && templateFieldConfig.templateConfig.templateName"
                style="color: grey">已选择: {{ templateFieldConfig.templateConfig.templateName }}</span>
          <el-button size="mini" style="margin-left: 10px" type="primary"
                     @click="showComponent(false,'templateId','templateConfig','id','templateName')">选择模板
          </el-button>
        </el-form-item>
        <el-form-item label="位置" prop="placeType">
          <el-select v-model="templateFieldConfig.placeTypeArr" :clearable="false" filterable multiple
                     style="width:100%">
            <el-option label="搜索框" value="1"></el-option>
            <el-option label="table列表" value="2"></el-option>
            <el-option label="新增/编辑" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="控件取值名称" prop="componentName">
          <el-input v-model="templateFieldConfig.componentName" :clearable="false" maxlength="255" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="控件展示名称" prop="componentLabel">
          <el-input v-model="templateFieldConfig.componentLabel" :clearable="false" maxlength="255" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="特殊类型" prop="fieldType">
          <el-select v-model="templateFieldConfig.fieldType" clearable filterable style="width:100%">
            <el-option label="一对一" value="association"></el-option>
            <el-option label="一对多" value="collection"></el-option>
            <el-option label="开关" value="switch"></el-option>
            <el-option label="选项" value="option"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重构后台" prop="rebuildFlag">
          <template #label>
            <span>
              重构后台：
              <el-tooltip effect="light" placement="bottom">
                <template #content>
                  本配置是否涉及后台变动。如Date日期类型，后台实体类需要重新生成，设置字段类型为Date
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </span>
          </template>
          <template slot-scope="scope">
            <el-radio-group v-model="templateFieldConfig.rebuildFlag">
              <el-radio label="0">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="允许的字段类型" prop="allowFieldType">
          <el-select v-model="templateFieldConfig.allowFieldTypeArr" clearable filterable multiple style="width:100%">
            <el-option label="Integer" value="Integer"></el-option>
            <el-option label="byte[]" value="byte[]"></el-option>
            <el-option label="Float" value="Float"></el-option>
            <el-option label="Long" value="Long"></el-option>
            <el-option label="Time" value="Time"></el-option>
            <el-option label="String" value="String"></el-option>
            <el-option label="Boolean" value="Boolean"></el-option>
            <el-option label="Double" value="Double"></el-option>
            <el-option label="Timestamp" value="Timestamp"></el-option>
            <el-option label="BigDecimal" value="BigDecimal"></el-option>
            <el-option label="Date" value="Date"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="禁止字段类型" prop="banFieldType">
          <el-select v-model="templateFieldConfig.banFieldTypeArr" clearable filterable multiple style="width:100%">
            <el-option label="Integer" value="Integer"></el-option>
            <el-option label="byte[]" value="byte[]"></el-option>
            <el-option label="Float" value="Float"></el-option>
            <el-option label="Long" value="Long"></el-option>
            <el-option label="Time" value="Time"></el-option>
            <el-option label="String" value="String"></el-option>
            <el-option label="Boolean" value="Boolean"></el-option>
            <el-option label="Double" value="Double"></el-option>
            <el-option label="Timestamp" value="Timestamp"></el-option>
            <el-option label="BigDecimal" value="BigDecimal"></el-option>
            <el-option label="Date" value="Date"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAddDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>


    <templateConfig-component :visible="templateConfigSelectVisible" @close="templateConfigSelectVisible =false"
                              @onSelect="onComponentSelect"></templateConfig-component>
  </div>
</template>
<script>
import TemplateConfigComponent from "@/views/templateConfig/component";
import {templateFieldConfigPostRequire} from '@/api/templateFieldConfig';

const defaultListQuery = {
  current: 1,
  pageSize: 10,
  placeType: undefined,
  templateConfig: {},
  placeTypeArr: undefined,
  templateId: undefined,
  fieldType: undefined,
}
const defaultTemplateFieldConfig = {
  allowFieldType: undefined,
  allowFieldTypeArr: undefined,
  componentName: undefined,
  templateId: undefined,
  placeType: undefined,
  templateConfig: {},
  placeTypeArr: undefined,
  banFieldType: undefined,
  id: undefined,
  componentLabel: undefined,
  fieldType: undefined,
  rebuildFlag: '0',
  banFieldTypeArr: undefined,
}
export default {
  components: {TemplateConfigComponent,},
  name: 'templateFieldConfigList',
  data() {
    return {
      componentSelectFromSearch: false,
      componentSelectField: '',
      componentAssociationField: '',
      componentAssociationTable: '',
      componentAssociationShowName: '',
      templateConfigSelectVisible: false,
      formRule: {

        templateId: [{required: true, message: "请输入模板", trigger: 'blur'}],
        placeTypeArr: [{required: true, message: "请选择位置", trigger: 'blur'}],
        componentName: [{required: true, message: "请输入控件取值名称", trigger: 'blur'}],
        componentLabel: [{required: true, message: "请输入控件展示名称", trigger: 'blur'}],
      },
      listQuery: this.$deepClone(defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      addDialogVisible: false,
      editDialogVisible: false,
      templateFieldConfig: this.$deepClone(defaultTemplateFieldConfig),
    }
  },
  created() {
    this.getList()
  },
  methods: {

    showComponent(isSearch, sField, aTable, aField, aShowName) {
      this[aTable + "SelectVisible"] = true;
      this.componentSelectFromSearch = isSearch
      this.componentSelectField = sField
      this.componentAssociationField = aField
      this.componentAssociationTable = aTable
      this.componentAssociationShowName = aShowName
    },
    onComponentSelect(data) {
      if (this.componentSelectFromSearch) {
        this.listQuery[this.componentSelectField] = data[this.componentAssociationField]
        let json = this.listQuery[this.componentAssociationTable] || {}
        json[this.componentAssociationShowName] = data[this.componentAssociationShowName]
        this.listQuery[this.componentAssociationTable] = json
      } else {
        this.templateFieldConfig[this.componentSelectField] = data[this.componentAssociationField]
        let json = this.templateFieldConfig[this.componentAssociationTable] || {}
        json[this.componentAssociationShowName] = data[this.componentAssociationShowName]
        this.templateFieldConfig[this.componentAssociationTable] = json
      }
    },
    handleResetSearch() {
      this.listQuery = this.$deepClone(defaultListQuery)
    },
    handleSearchList() {
      this.listQuery.current = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate()
      }
    },
    handleAdd() {
      this.addDialogVisible = true
      this.templateFieldConfig = this.$deepClone(
          defaultTemplateFieldConfig)
    },
    handleAddDialogConfirm() {
      this.$refs.addDialogRef.validate((valid) => {
        if (valid) {
          templateFieldConfigPostRequire('add', this.templateFieldConfig).then(response => {
            if (response) {
              this.$message({
                message: response.message,
                type: response.status ? 'success' : 'error'
              })
            }
            this.addDialogVisible = false
          }).finally(() => {
            this.getList()
          })
        }
      });
    },
    handleDelete(row) {
      this.$confirm('是否要删除该模板可配置的字段映射类型管理?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        templateFieldConfigPostRequire('delete', {'id': row.id}).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
        }).finally(() => {
          this.getList()
        })
      })
    },
    handleUpdate(row) {
      this.editDialogVisible = true
      this.templateFieldConfig = this.$deepClone(row)
    },
    handleEditDialogConfirm() {
      this.$refs.editDialogRef.validate((valid) => {
        if (valid) {
          templateFieldConfigPostRequire('update', this.templateFieldConfig).then(response => {
            if (response) {
              this.$message({
                message: response.message,
                type: response.status ? 'success' : 'error'
              })
            }
            this.editDialogVisible = false
          }).finally(() => {
            this.getList()
          })
        }
      });
    },
    getList() {
      this.listLoading = true
      templateFieldConfigPostRequire('listPage', this.listQuery).then(response => {
        this.listLoading = false
        this.list = response.data.records
        this.total = response.data.total
      })
    }
  }
}
</script>
<style>
.demo-table-expand label {
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 10px;
  width: 100%;
}
</style>
